<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #one {
        width: 200px;
        height: 200px;
        position: absolute;
    }

    #two {
        z-index: -1;
        width: 200px;
        height: 100px;
        position: absolute;
    }

    img {
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div id='one'>
        <img src="1.jpg" alt="">
    </div>
    <div id='two'>
        <img src="2.jpg" alt="">
    </div>
</body>
<script>
    let app = window
    app.onmousedown = function (e) {
        e.preventDefault()
        console.log(1);
    }
    class Arr {
        constructor(id) {
            this.one = document.getElementById(id)
            this.disx = 0;
            this.disy = 0;
            this.init()
        } 
        init() {
            let This = this
            this.one.onmousedown = function (ev) {
                ev.preventDefault()
                This.down(ev)
            }
        }

        down(ev) {
            let This = this
            var event = ev || window.event
            this.disx = event.clientX - this.one.offsetLeft
            this.disy = event.clientY - this.one.offsetTop
            document.onmousemove = function (ev) {
                This.move(ev)
            }
            document.onmouseup = function () {
                This.up()
            }
        }

        move(ev) {
            var event = ev || window.event
            this.one.style.left = event.clientX - this.disx + 'px';
            this.one.style.top = event.clientY - this.disy + 'px';
        }

        up() {
            document.onmousemove = null;
            document.onmouseup = null
        }

    }

    new Arr('one')

    class Err extends Arr {
        constructor(id) {
            super(id)
        }

        move(ev) {
            var event = ev || window.event;
            var left = event.clientX - this.disx;
            var top = event.clientY - this.disy;
            // if(left<0) left = 0;
            // if(left>document.documentElement.clientWidth - this.one.offsetWidth) 
            // left = document.documentElement.clientWidth-this.one.offsetWidth;
            if (left < 0) left = 0;
            if (left > document.documentElement.clientWidth - this.one.offsetWidth)
                left = document.documentElement.clientWidth - this.one.offsetWidth;
            if (top < 0) top = 0;
            if (top > document.documentElement.clientHeight - this.one.offsetHeight)
                top = document.documentElement.clientHeight - this.one.offsetHeight;
            this.one.style.left = left + 'px'
            this.one.style.top = top + 'px'
        }
    }

    new Err('two')
</script>

</html>